<template>
  <div class="carousel">
    <div class="carousel-warpper" @mouseenter="carouselEnter" @mouseleave="carouselLeave">
      <transition-group name="hide">
        <div class="carousel-img" :class="{ active: currentIndex === img.key }" v-for="img in imgsrc" :key="img.key"
             v-show="currentShow[img.key]">
          <img :src="img.path" alt=""/>
        </div>
      </transition-group>
    </div>
    <div class="carousel-lines" @mouseenter="carouselEnter" @mouseleave="carouselLeave">
      <div class="line-item" :class="{ active: currentIndex === key }" v-for="(index, key) in imgsrc.length" :key="key">
        <svg class="icon line-item-icon" aria-hidden="true">
          <use xlink:href="#icon-minus"></use>
        </svg>
      </div>
    </div>
    <div class="carousel-pre" v-show="preNextShow" @click="preShow" @mouseenter="carouselEnter"
         @mouseleave="carouselLeave">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-pre"></use>
      </svg>
    </div>
    <div class="carousel-next" v-show="preNextShow" @click="nextShow" @mouseenter="carouselEnter"
         @mouseleave="carouselLeave">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-next"></use>
      </svg>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        preNextShow: false,
        currentIndex: 0,
        currentShow: [],
        inerval: 0,
        timer: 3000
      };
    },
    props: {
      imgsrc: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    created() {
      this.imgsrc.forEach(() => {
        this.currentShow.push(false);
        this.currentShow[this.currentIndex] = true;
      });
    },
    mounted() {
      this.slider();
    },
    methods: {
      carouselEnter() {
        this.preNextShow = true;
        this.destroySlider();
      },
      carouselLeave() {
        this.preNextShow = false;
        this.slider();
      },
      nextShow() {
        // this.preNextShow = false;
        this.currentShow[this.currentIndex] = false;
        this.currentIndex = this.currentIndex === this.imgsrc.length - 1 ? 0 : this.currentIndex + 1;
        this.currentShow[this.currentIndex] = true;
      },
      preShow() {
        // this.preNextShow = false;
        this.currentShow[this.currentIndex] = false;
        this.currentIndex = this.currentIndex === 0 ? this.imgsrc.length - 1 : this.currentIndex - 1;
        this.currentShow[this.currentIndex] = true;
      },
      slider() {
        this.inerval = window.setInterval(this.nextShow, this.timer);
      },
      destroySlider() {
        window.clearInterval(this.inerval);
      }
    }
  };
</script>

<style lang="stylus" rel="stylussheet/stylus">
  .carousel
    position relative
    width 100%
    height 100%
    .carousel-warpper
      position relative
      width 100%
      height 100%
      font-size 0
      cursor pointer
      overflow hidden
      .carousel-img
        width 100%
        height 100%
        position absolute
        z-index 10
        &.active
          z-index 20
        &.hide-enter-active, &.hide-leave-active
          transition all 0.5s linear
          transform translate3d(0, 0, 0)
        &.hide-enter
          transform translate3d(-100%, 0, 0)
        // opacity 0
        &.hide-leave-to
          transform translate3d(100%, 0, 0)
        img
          width 100%
          height 100%
    .carousel-lines
      position absolute
      width 100%
      left 0
      bottom 0
      text-align center
      font-size 0
      z-index 40
      .line-item
        display inline-block
        font-size 14px
        color rgba(7, 17, 27, 0.3)
        margin 0 5px
        &.active
          color #FFFFFF
    .carousel-pre
      position absolute
      left 10px
      top 43%
      width 40px
      height 40px
      line-height 40px
      border-radius 50%
      font-size 20px
      z-index 30
      color #FFFFFF
      text-align center
      background rgba(0, 0, 0, 0.5)
      cursor pointer
    .carousel-next
      position absolute
      right 10px
      top 43%
      width 40px
      height 40px
      line-height 40px
      border-radius 50%
      font-size 20px
      z-index 30
      color #FFFFFF
      text-align center
      background rgba(0, 0, 0, 0.5)
      cursor pointer
</style>
